<template>
	<view class="content">
		<!-- 顶部标签组件 -->
		<view class="safeContent">
			<NAVC title='资金账户'></NAVC>
		</view>
		<view class="tabsTitle">
			<view @click="active = index" :class="active == index ? 'item-tab active' : 'item-tab'"
				v-for="(item,index) in titleList">
				{{item.titleName}}
			</view>
		</view>
		<component :is="active == 0 ? 'capKoi':'capUsdt'" />
	</view>
</template>
<script lang="ts">
	import capKoi from '../capitalKoi/index.vue';
	import capUsdt from '../capitalUsdt/index.vue';
	export default {
		components: {
			capUsdt,
			capKoi
		}
	}
</script>
<script lang="ts" setup>
	import NAVC from '@/components/equipmentC/navC/index.vue'
	import { ref } from 'vue';
	const active = ref(0);
	const titleList = ref([{ titleName: 'KOI' }, { titleName: 'UDST' }])
</script>

<style lang="scss">
	.content {
		min-height: 100vh;

		.tabsTitle {
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			justify-content: space-between;
			width: 316px;
			height: 60px;
			margin: 0 auto;
			border: 2px solid rgba(255, 255, 255, 0.4);
			border-radius: 32px;

			.item-tab {
				width: 154px;
				height: 58px;
				font-size: 32px;
				text-align: center;
				line-height: 58px;
				color: #fff;
				border-width: 2px;
				border-style: solid;
				border-radius: 32px;
				border-color: rgba(0, 0, 0, 0);

				&.active {
					border-color: #fff;
				}
			}
		}
	}
</style>